import {View, Map, Button, CheckboxGroup, Checkbox} from '@tarojs/components'
import {useEffect, useState} from 'react'
import {getLocation, request} from '@tarojs/taro'
export default () => {
  const [latitude, setLatitude] = useState(0)
  const [longitude, setLongitude] = useState(0)
  
  //数组，渲染列表，checked控制是否勾选
  const [checkedArr, setCheckArr] = useState([
    {id: 0, value: 'zs', name: '张三', checked: false},
    {id: 1, value: 'ls', name: '李四', checked: false}
  ])
  //控制无的CheckBox的状态
  const [checkedNot, setCheckedNot] = useState(false)

  //渲染
  const IsChecked = () => {
    return (
      checkedArr.map(item => 
        <Checkbox 
          key={item.id} 
          value={item.value} 
          checked={item.checked} 
        >
          {item.name}
        </Checkbox>
      )
    )
  }
  //根据e.detail.value数组中的字段判断是否item是否在  其中，不在checked设置为false，在设置为true
  const changeChecked = e => {
    //设置无的状态为false，取消勾选
    setCheckedNot(false)
    //解构出value数组
    const {value} = e.detail
    //深拷贝
    const newCheckedArr = JSON.parse(JSON.stringify(checkedArr))
    //逻辑处理
    newCheckedArr.map(item => value.includes(item.value) ? item.checked = true : item.checked = false)
    //改变设置newCheckedArr中的数组的值
    setCheckArr(newCheckedArr)
  }

  //选择无
  const changeNot = () => {
    //处理newCheckedArr数组中的checked设置为false
    const newCheckedArr = JSON.parse(JSON.stringify(checkedArr))
    newCheckedArr.map(item => item.checked = false)
    setCheckArr(newCheckedArr)
    //切换无的状态
    setCheckedNot(!checkedNot)
  }

  useEffect(() => {
    getLocation({
      type: 'wgs84',
      success(res) {
        const {latitude, longitude} = res
        setLatitude(latitude)
        setLongitude(longitude)
      }
    })
  }, [])
  return (
    <View>
      <Map 
      id="myMap"
      style='width: 100%; height: 500rpx'
      latitude = {latitude} 
      longitude = {longitude}
      show-location
    />

    <View>
      <CheckboxGroup onChange={changeChecked}>
        {IsChecked()}
      </CheckboxGroup>
      <CheckboxGroup onChange={changeNot}>
        <Checkbox value="not" checked={checkedNot}>无</Checkbox>
      </CheckboxGroup>
    </View>
  </View>
  )
}